<!--完整时间控件-->
<template>
  <van-popup
    v-model:show="shows"
    @close="onClickLeft"
    :key="dateType + '_box'"
    round
    :z-index="zIndex + 100"
    position="bottom"
    :style="{ height: '40%' }"
  >
    <div>
      <van-datetime-picker
        v-model="currentDate"
        :key="dateType + '_date'"
        :type="dateType"
        :title="title"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="confirm"
        @cancel="cancel"
        @change="change"
      />
    </div>
  </van-popup>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, watch } from "vue";

export default {
  name: "TopPull",
  props: {
    dateType: {
      type: String,
      default: () => {
        return "datetime";
      }
    },
    zIndex: {
      type: Number,
      default: () => {
        return 1000;
      }
    },
    show: Boolean, // 是否显示
    minDate: [Date, String],
    maxDate: [Date, String],
    defaultTime: {
      type: Date,
      default: () => {
        return new Date();
      }
    },
    title: {
      type: String,
      default: () => {
        return "选择时间";
      }
    }
  },
  emits: ["update:show", "change", "checks"],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const pageData = reactive({
      shows: props.show,
      currentDate: props.defaultTime
    });
    // 打开补录弹窗
    watch(
      () => props.show,
      item => {
        pageData.shows = item;
      },
      { immediate: true }
    );
    const pageMethod = {
      onClickLeft() {
        proxy.$emit("update:show", false);
      },
      confirm(data) {
        // 完成
        proxy.$emit("change", data);
        pageMethod.cancel();
      },
      cancel() {
        // 取消
        proxy.$emit("update:show", false);
      },
      change(data) {
        // 选中
        proxy.$emit("checks", data);
      },
      formatter(type, val) {
        if (type === "year") {
          return `${val}年`;
        }
        if (type === "month") {
          return `${val}月`;
        }
        if (type === "day") {
          return `${val}日`;
        }
        if (type === "hour") {
          return `${val}时`;
        }
        if (type === "minute") {
          return `${val}分`;
        }
        return val;
      }
    };
    return {
      ...pageMethod,
      ...props,
      ...toRefs(pageData)
    };
  }
};
</script>

<style scoped></style>
